<template>
	<view>
		<text class="iconfont icon-location">123</text>
		<text class="iconfont icon-checked">123</text>
		<text class="t-icon t-icon-tuanduibumen"></text>
		<uni-forms ref="formRef" :model="data" :rules="rules" label-width="0">
			<uni-forms-item name="mobile">
				<uni-easyinput v-model="data.mobile" type="text" :clearable="false" placeholder="请输入手机号" />
			</uni-forms-item>
			<uni-forms-item name="password">
				<uni-easyinput v-model="data.password" type="password" :clearable="false" placeholder="请输入密码" />
			</uni-forms-item>
			<uni-forms-item name="addinfo">
				<uni-easyinput v-model="data.addinfo" type="textarea" :clearable="false" placeholder="请输入相关信息" />
			</uni-forms-item>
		</uni-forms>
		<button @tap="submitData" type="primary">提交</button>
	</view>
</template>

<!-- 逻辑还是写在 setup 中 -->
<script setup>
import { ref } from 'vue';

//定义状态变量
const data = ref({
	mobile: '',
	password: '',
	addinfo: ''
});

//校验规则
const rules = {
	addinfo: {
		rules: [
			{
				required: true, // 非空
				errorMessage: '请输入信息'
			},
			{
				minLength: 5, // 最短
				maxLength: 100, // 最长
				errorMessage: '信息长度 在{minLength}-{maxLength} 之间'
			}
		]
	},
	password: {
		rules: [
			{
				required: true, // 非空
				errorMessage: '请输入密码'
			},
			{
				minLength: 8, // 最短
				maxLength: 16, // 最长
				errorMessage: '密码长度 在{minLength}-{maxLength} 之间'
			},
			{ pattern: /^([A-Z])[A-Za-z0-9]{8,16}$/, errorMessage: '密码格式不正确' }
		]
	},
	mobile: {
		rules: [
			{
				required: true, // 非空
				errorMessage: '请输入手机号'
			},

			{ pattern: /^1[3-9]\d{9}$/, errorMessage: '手机号格式不正确' }
		]
	}
};
//获取表单元素
const formRef = ref();

//提交表单
const submitData = async () => {
	try {
		await formRef.value.validate();
	} catch (e) {
		console.log(e);
	}
};
</script>

<!-- 这里只是编写 为了让小程序样式生效的选项 -->
<script>
// 选项式
export default {
	options: {
		styleIsolation: 'shared'
	}
};
</script>

<style lang="scss">
.uni-forms {
	margin: 100rpx;
}

// 会自动的添加 属性选择器，让自己添加的样式能够生效
// h5端这么写即可
// ::v-deep .uni-forms-item {
// 	margin-bottom: 100rpx;
// }

// ::v-deep .uni-input-input {
// 	background-color: skyblue;
// 	color: red;
// }
</style>
